<template>
  <!-- 货物信息 -->
  <div>
    <el-form
      ref="vehicleInfo"
      :model="form"
      :rules="rules"
      size="mini"
      label-position="right"
      label-width="148px"
      class="flex-form"
    >
      <el-form-item label="运输工具名称" prop="transportName">
        <el-input
          v-model="form.transportName"
          placeholder="请输入运输工具名称"
        />
      </el-form-item>
      <el-form-item label="运输工具代码" prop="transportId">
        <el-input v-model="form.transportId" placeholder="请输入运输工具代码"/>
      </el-form-item>
      <el-form-item label="IC卡号" prop="icCardNo">
        <el-input v-model="form.icCardNo" placeholder="请输入运输工具代码"/>
      </el-form-item>
      <el-form-item label="电子车牌" prop="rfid">
        <el-input v-model="form.rfid" placeholder="请输入运输工具代码"/>
      </el-form-item>
      <el-form-item label="抵达第一目的港日期" prop="arrivalDate">
        <el-date-picker
          clearable
          v-model.trim="form.arrivalDate"
          type="datetime"
          value-format="yyyyMMddHHmmss"
          placeholder="选择抵达第一目的港日期"
          style="width: 172px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="驾驶员代码" prop="driverId">
        <el-input v-model="form.driverId" placeholder="请输入驾驶员代码"/>
      </el-form-item>
      <el-form-item label="驾驶员名称" prop="driverName">
        <el-input v-model="form.driverName" placeholder="请输入驾驶员名称"/>
      </el-form-item>
      <el-form-item label="健康状态" prop="healthStatus">
        <el-select
          v-model="form.healthStatus"
          placeholder="请选择健康状态"
        >
          <el-option
            v-for="(item, index) in healthStatusDict"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有预防接种" prop="vaccinateStatus">
        <el-select
          v-model="form.vaccinateStatus"
          size="mini"
          placeholder="是否有预防接种"
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="司乘人员数" prop="numStaffMember">
        <el-input-number
          v-model="form.numStaffMember"
          size="mini"
          :min="1"
          placeholder="司乘人员数"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="途径国家或地区" prop="routeCountry">
        <el-select
          v-model="form.routeCountry"
          placeholder="请选择途径国家或地区"
          filterable
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_route_country"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关锁信息" prop="customLockList">
        <el-button class="input-btn" icon="el-icon-plus" @click="handleCustomLock"
        >添加({{ form.customLockList.length }})
        </el-button>
      </el-form-item>
      <el-form-item label="托架/拖挂车信息" prop="trayList">
        <el-button class="input-btn" icon="el-icon-plus" @click="handleTray"
        >添加({{ form.trayList.length }})
        </el-button
        >
      </el-form-item>
      <el-form-item label="集装箱信息" prop="contaList">
        <el-button class="input-btn" icon="el-icon-plus" @click="handleConta"
        >添加({{ form.contaList.length }})
        </el-button
        >
      </el-form-item>
    </el-form>
    <!-- 运输工具列表 -->
    <div>
      <el-button
        v-if="editBillIndex != -1"
        type="success"
        plain
        @click="saveEditVehicle"
        size="mini"
        icon="el-icon-edit"
        style="margin: 15px 0"
      >保存运输工具
      </el-button
      >
      <el-button
        v-else
        type="success"
        plain
        @click="addVehicle"
        size="mini"
        icon="el-icon-plus"
        style="margin: 15px 0"
      >新增运输工具
      </el-button
      >
      <el-table
        min-height="600"
        ref="tableList"
        :data="vehicleList"
        size="mini"
        @selection-change="handleSelectionChange"
      >
        <el-empty
          slot="empty"
          :image="require('@/assets/images/empty.png')"
          :image-size="80"
        ></el-empty>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="transportId" label="运输工具代码" align="center"></el-table-column>
        <el-table-column prop="transportName" label="运输工具名称" align="center"></el-table-column>
        <el-table-column prop="icCardNo" label="IC卡号" align="center"></el-table-column>
        <el-table-column prop="rfid" label="电子车牌" align="center"></el-table-column>
        <el-table-column prop="arrivalDate" label="抵达日期" align="center"></el-table-column>
        <el-table-column prop="driverId" label="驾驶员代码" align="center">
        </el-table-column>
        <el-table-column prop="healthStatus" label="健康状态" align="center">
          <template slot-scope="scope">
            <dict-value :list="healthStatusDict" :dictCode="scope.row.healthStatus"/>
          </template>
        </el-table-column>
        <el-table-column prop="vaccinateStatus" label="是否预防接种" align="center">
          <template slot-scope="scope">
            {{ scope.row.vaccinateStatus == '1' ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="numStaffMember" label="司乘人员数" align="center"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding fixed-width"
          width="80"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click.native.prevent="deleteBillItem(scope.$index, vehicleList)"
            >移除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 集装箱信息 -->
    <container-info
      ref="containerInfo"
      @submitContainerInfo="submitContainerInfo"
      :mftContaList="form.contaList"
    ></container-info>

    <!-- 挂车信息 -->
    <trailer-info
      ref="trailerInfo"
      @submitTrailerInfo="submitTrailerInfo"
      :trailerList="form.trayList"
    ></trailer-info>

    <!-- 关锁信息 -->
    <customslock-info ref="customsLockInfo" @submitCustomsLockInfo="submitCustomsLockInfo"
                      :customLockList="form.customLockList"></customslock-info>


  </div>
</template>

<script>
import curr_type from "@/assets/dicts/curr_type.json";
import ContainerInfo from "./containerInfo.vue";
import trailerInfo from "./trailerInfo.vue";
import customslockInfo from "./customslockInfo.vue";

export default {
  name: "addTransport",
  components: {ContainerInfo, trailerInfo, customslockInfo},
  dicts: ['mft_route_country'],
  data() {
    return {
      // 运输工具列表
      vehicleList: [],
      //健康状态
      healthStatusDict: [{value: '1', label: '正常', listClass: null}, {value: '0', label: '异常', listClass: null}],
      form: {
        arrivalDate: null,
        driverId: null,
        driverName: null,
        icCardNo: null,
        rfid: null,
        healthStatus: null,
        numStaffMember: null,
        transportId: null,
        transportName: null,
        vaccinateStatus: null,
        customLockList: [],//关锁信息
        trayList: [],
        contaList: [],
      },
      rules: {
        arrivalDate: [
          {
            type: "string",
            required: true,
            message: "选择抵达第一目的港日期不能为空",
            trigger: "blur",
          },
        ],
        driverId: [
          {
            type: "string",
            required: true,
            message: "驾驶员代码不能为空",
            trigger: "blur",
          },
        ],
        driverName: [
          {
            type: "string",
            required: true,
            message: "驾驶员名称不能为空",
            trigger: "blur",
          },
        ],
        healthStatus: [
          {
            type: "string",
            required: true,
            message: "健康状态不能为空",
            trigger: "blur",
          },
        ],
        numStaffMember: [
          {
            required: true,
            message: "司乘人员数不能为空",
            trigger: "blur",
          },
        ],
        transportId: [
          {
            type: "string",
            required: true,
            message: "运输工具代码不能为空",
            trigger: "blur",
          },
        ],
        transportName: [
          {
            type: "string",
            required: true,
            message: "运输工具名称不能为空",
            trigger: "blur",
          },
        ],
        vaccinateStatus: [
          {
            type: "string",
            required: true,
            message: "是否预防接种不能为空",
            trigger: "blur",
          },
        ],
        routeCountry: [
          {
            required: true,
            message: "途径国家和地区不能为空",
            trigger: "blur",
          },
        ],
      },
      editBillIndex: -1,
      currentAddIndex: -1,
      currentCheckedRow: {},
      bt_currency: curr_type.value, //货币类型字典
    };
  },
  computed: {
    dictProp() {
      //字典list，为避免子组件重复调接口获取，用computed计算传值
      return {
        type: this.dict.type,
      };
    },
  },
  methods: {
    // 控制只能同时选择一个提运单号
    handleSelectionChange(selection, val) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.tableList.toggleRowSelection(del_row, false);
      }
      if (selection.length > 0) {
        for (let key in this.form) {
          this.form[key] = selection[0][key];
        }
        this.currentCheckedRow = selection[0];
        this.vehicleList.forEach((item, index) => {
          if (item.transportId === selection[0].transportId) {
            this.editBillIndex = index;
          }
        });
        console.log("编辑下标:" + this.editBillIndex);
      } else {
        this.resetGoodsForm();
        this.currentCheckedRow = {};
        this.editBillIndex = -1;
      }
    },
    // 添加车辆
    addVehicle() {
      this.$refs["vehicleInfo"].validate((valid) => {
        if (valid) {
          let ids = this.vehicleList.map(n => n.transportId);
          if (ids.indexOf(this.form.transportId) != -1) {
            this.$modal.alertWarning("此车已存在");
            return;
          }
          this.vehicleList.push({
            ...this.form,
          });
          this.resetGoodsForm();
        }
      });
    },
    saveEditVehicle() {
      this.$refs["vehicleInfo"].validate((valid) => {
        if (valid) {
          let obj = {
            ...this.form,
          };
          this.$set(this.vehicleList, this.editBillIndex, obj);
          this.resetGoodsForm();
          this.editBillIndex = -1;
        }
      });
    },
    resetGoodsForm() {
      this.$refs["vehicleInfo"].resetFields();
      this.form.consigneeList = [];
      this.form.consignorList = [];
      this.form.notifyPersonList = [];
      this.form.dangerousPersonList = [];
      this.form.mftContaList = [];
    },

    // 添加商品项信息
    handleAddGoods(row, index) {
      this.currentAddIndex = index;
      this.$refs.goodsTable.open(row);
    },
    //添加关锁信息
    handleCustomLock() {
      this.$refs.customsLockInfo.open();
    },
    // 添加挂车
    handleTray() {
      this.$refs.trailerInfo.open();
    },
    // 添加集装箱
    handleConta() {
      this.$refs.containerInfo.open();
    },
    // 保存每一项收费科目
    saveBillItem(row) {
      this.$set(row, "isEdit", false);
    },
    // 编辑每一项收费科目
    editBillItem(row, index) {
      for (let key in this.form) {
        this.form[key] = row[key];
      }
      this.editBillIndex = index;
    },
    // 删除每一项收费科目
    deleteBillItem(index, rows) {
      rows.splice(index, 1);
    },
    // 集装箱list
    submitContainerInfo(val) {
      this.form.contaList = val;
    },
    // 挂车list
    submitTrailerInfo(val) {
      this.form.trayList = val;
    },
    // 关锁list
    submitCustomsLockInfo(val) {
      this.form.customLockList = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  .el-form-item {
    width: 312px;
    margin-right: 0px;
  }
}

::v-deep .el-table__header {
  .el-checkbox {
    display: none;
  }
}

::v-deep .el-input-group__prepend {
  border: none !important;
  background: none !important;
}

::v-deep .input-btn {
  color: #13ce66 !important;
  background: #e7faf0 !important;
  border-color: #a1ebc2 !important;
}
</style>
